<template>
  <div>
    <page-list
      :url="url"
      :filterTab="true"
      :params="filter"
      :filterParams="filterParams"
      @initList="_initList"
    >
      <van-cell class="mb-10" v-for="(item, index) in list" :key="index">
        <div class="case_item" @click="goFile(item)">
          <div class="file_img">
            <img :src="item.Cover" alt="" />
          </div>
          <div class="case_name">
            <van-tag class="tag_item" type="danger">{{
              item.AccidentLevelName
            }}</van-tag>
            <div class="name_item">
              {{ item.CaseTitle }}
            </div>
          </div>
          <div class="case_text">
            <span>行业：无</span>
            <span>事故类型：{{ item.AccidentTypeName }}</span>
          </div>
          <div class="case_sort">
            <div>{{ item.CreateDate }}</div>
            <div class="sort_item">
              <div class="item">
                <img src="@/assets/Images/AppIcon/icon_list_user.png" alt="" />
                <div class="mr-20">平台</div>
              </div>
              <div class="item">
                <img
                  src="@/assets/Images/AppIcon/icon_list_tracking.png"
                  alt=""
                />
                <div>{{ item.ViewCnt }}</div>
              </div>
            </div>
          </div>
        </div>
      </van-cell>
    </page-list>
  </div>
</template>

<script>
import PageList from "@/components/PageList/PageList.vue";
export default {
  components: { PageList },
  data() {
    return {
      loading: false,
      finished: false,
      url: this.$constUrl.COMMON_CASE_DATA,
      list: [],
      filterParams: [
        {
          name: "type",
          title: "来源",
          data: [
            { text: "公共", value: "Sys" },
            { text: "公司", value: "Company" },
          ],
        },
        {
          name: "AttExt",
          title: "格式",
          data: [
            { text: "不限", value: "" },
            { text: "PDF文档", value: ".pdf" },
            { text: "MP4视频", value: ".mp4" },
          ],
        },
      ],
      filter: {
        dataType: "CaseList",
      },
    };
  },
  methods: {
    _initList(list) {
      this.list = list;
    },
    onLoad() {
      this.loading = true;
      ++this.filter.page;
      list(this.filter).then((res) => {
        this.loading = false;
        this.filter.page = res.data.PageIndex;
        this.list = this.list.concat(res.data.Data);
        if (!res.data.HasNextPage) {
          this.finished = true;
        }
      });
    },
    // 文件页面
    goFile(item) {
      this.$router.push("/Case/CaseDetail?id=" + item.ID);
    },
  },
};
</script>

<style lang="less">
.case_item {
  background-color: #ffffff;
  /*margin-bottom: 10px;*/
  border-radius: 5px;
  position: relative;
}
.file_img {
  img {
    width: 100%;
    height: auto;
  }
}
.van-cell {
  border-radius: 5px;
}
.case_name {
  display: flex;
  margin: 10px 0 20px 0;
  align-items: center;
  .name_item {
    width: 80%;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 16px;
  }
  .tag_item {
    border-radius: 5px;
    font-size: 14px;
    min-width: 75px;
  }
}

.case_text {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  color: #666;
  font-size: 14px;
}

.case_sort {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #666;
  font-size: 14px;
  .sort_item {
    display: flex;
    .item {
      display: flex;
      img {
        height: 15px;
        width: 15px;
        margin-right: 5px;
      }
    }
  }
}
</style>
